<template>
    <!-- 创建地图容器元素 -->
    <van-nav-bar title="地图" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="container"></div>

</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

const onClickLeft = () => history.back();
onMounted(() => {
    initMap()
})
const initMap = () => {
    // 创建地图实例
            // eslint-disable-next-line no-undef
            var map = new BMapGL.Map('container')
            // 设置中心点坐标
            // eslint-disable-next-line no-undef
            var point = new BMapGL.Point(104.047736, 30.636993)
            // 地图初始化，同时设置地图展示级别
            map.centerAndZoom(point, 15)

            // eslint-disable-next-line no-undef
            var point1 = new BMapGL.Point(104.044215,30.634507)
            // eslint-disable-next-line no-undef
            var marker = new BMapGL.Marker(point1) // 创建标注
            // 鼠标放大缩小地图
            map.enableScrollWheelZoom(true)
            map.addOverlay(marker) // 将标注添加到地图中
}
</script>

<style lang="scss" scoped>

#container {
    height: 800px;
    width: 800px;
}
</style>
